<template>
    <v-app>
        <v-container>
            <v-row>
                <!-- 第一列：添加按钮和div列表 -->
                <v-col cols="4">
                    <v-btn color="primary" @click="showAddDialog = true">添加首页组件</v-btn>
                    <draggable v-model="divs" @start="drag=true" @end="drag=false">
                        <transition-group>
                            <div
                                v-for="(div, index) in divs"
                                :key="div.id"
                            >
                                <div v-if="div.type == 'type1'" @click="selectDiv(div)">
                                    <diy-type1
                                        :data="div.form"
                                        :id="div.id"
                                        @del="removeItem(div.id)"
                                    />
                                </div>
                                <div v-if="div.type == 'type2'" @click="selectDiv(div)">
                                    <diy-type2
                                        :data="div.form"
                                        :id="div.id"
                                        @del="removeItem(div.id)"
                                    />
                                </div>
                                <div v-if="div.type == 'type3'" @click="selectDiv(div)">
                                    <diy-type3
                                        :data="div.form"
                                        :id="div.id"
                                        @del="removeItem(div.id)"
                                    />
                                </div>
                                <div v-if="div.type == 'type4'" @click="selectDiv(div)">
                                    <diy-type4
                                        :data="div.form"
                                        :id="div.id"
                                        @del="removeItem(div.id)"
                                    />
                                </div>
                                <div v-if="div.type == 'type5'" @click="selectDiv(div)">
                                    <diy-type5
                                        :data="div.form"
                                        :id="div.id"
                                        @del="removeItem(div.id)"
                                    />
                                </div>
                                <div v-if="div.type == 'type6'" @click="selectDiv(div)">
                                    <diy-type6
                                        :data="div.form"
                                        :id="div.id"
                                        @del="removeItem(div.id)"
                                    />
                                </div>
                            </div>
                        </transition-group>
                    </draggable>
                </v-col>
                <!-- 第二列：表单 -->
                <v-col cols="7">
                    <div v-if="selectedDiv">
                        <v-form @submit.prevent="submitForm">
                            <div v-if="selectedDiv.type === 'type1'">
                                <v-text-field
                                    v-model="selectedDiv.form.table_title"
                                    label="组件标题名称"
                                    required
                                ></v-text-field>

                                <v-text-field
                                    v-model="selectedDiv.form.title"
                                    label="组件内容"
                                    required
                                ></v-text-field>
                                <v-text-field
                                    v-model="selectedDiv.form.button_name"
                                    label="按钮名称"
                                    required
                                ></v-text-field>
                                <v-text-field
                                    v-model="selectedDiv.form.button_herf"
                                    label="按钮跳转"
                                    required
                                ></v-text-field>
                            </div>
                            <div v-if="selectedDiv.type === 'type2'">
                                <v-text-field
                                    v-model="selectedDiv.form.table_title"
                                    label="组件标题名称"
                                    required
                                ></v-text-field>

                                <v-text-field
                                    v-model="selectedDiv.form.title"
                                    label="组件内容"
                                    required
                                ></v-text-field>
                                <div>
                                    <p>微信公众号</p>
                                    <ImageUpload v-model="selectedDiv.form.code_url" class="mb-4"></ImageUpload>
                                </div>
                                <div>
                                    <p>标签</p>
                                    <v-row>
                                        <v-col>
                                            <!-- 添加标签的按钮 -->
                                            <v-btn color="primary" @click="addTag">添加标签</v-btn>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col>
                                            <!-- 标签列表 -->
                                            <v-chip
                                                v-for="(tag, index) in selectedDiv.form.tag"
                                                :key="index"
                                                close
                                                @click:close="removeTag(index)"
                                            >
                                                {{ tag }}
                                            </v-chip>
                                        </v-col>
                                    </v-row>
                                </div>
                            </div>
                            <div v-if="selectedDiv.type === 'type3'">
                                <v-text-field
                                    v-model="selectedDiv.form.app_name"
                                    label="网站标题"
                                    required
                                ></v-text-field>
                                <div>
                                    <p>顶部logo</p>
                                    <ImageUpload v-model="selectedDiv.form.app_url" class="mb-4"></ImageUpload>
                                </div>
                            </div>
                            <div v-if="selectedDiv.type === 'type4'">
                                <ImageListUp
                                    :is_text="false"
                                    :data="selectedDiv.form.targetItem"
                                />
                            </div>
                            <div v-if="selectedDiv.type === 'type5'">
                                <ImageListUp
                                    :data="selectedDiv.form.targetItem"
                                />
                            </div>
                            <div v-if="selectedDiv.type === 'type6'">
                                <v-text-field
                                    v-model="selectedDiv.form.table_title"
                                    label="组件标题名称"
                                    required
                                ></v-text-field>
                                <ImageListUp
                                    :is_text="false"
                                    :data="selectedDiv.form.targetItem"
                                />
                            </div>
                            <div style="margin-top: 20px">
                                <v-btn color="success" type="submit">保存</v-btn>
                            </div>
                        </v-form>
                    </div>
                </v-col>
            </v-row>
            <!-- 添加Div的对话框 -->
            <v-dialog v-model="showAddDialog" persistent max-width="600px">
                <v-card>
                    <v-card-title>
                        <span class="headline">添加新的组件</span>
                    </v-card-title>
                    <v-card-text>
                        <v-select
                            v-model="newDivType"
                            :items="divTypes"
                            label="选择需要的组件"
                        ></v-select>
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="blue darken-1" text @click="showAddDialog = false">取消</v-btn>
                        <v-btn color="blue darken-1" text @click="addDiv">添加</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </v-container>
    </v-app>
</template>

<script>
import DiyType1 from './common/DiyType1.vue';
import DiyType2 from './common/DiyType2.vue';
import DiyType3 from './common/DiyType3.vue';
import DiyType4 from './common/DiyType4.vue';
import DiyType5 from './common/DiyType5.vue';
import DiyType6 from './common/DiyType6.vue';
import ImageListUp from './common/ImageListUp.vue';
import ImageUpload from "../../../widgets/ImageUpload.vue";
import axios from "axios";
import draggable from 'vuedraggable';
export default {
    components: {ImageListUp,DiyType1,DiyType2,DiyType3,DiyType4,DiyType5,DiyType6, ImageUpload,draggable},
    data() {
        return {
            drag: false,
            divs: [],
            selectedDiv: null,
            showAddDialog: false,
            newDivType: 'type1',
            currentIndex: 0, // 当前颜色索引
            colors: ['#1976d2','#ba2b39',],
            banner_image: "",
            banner_link: '',
            banner_target: '_blank',
            targetItem: [
                { value: '_blank', text: '新窗口' },
                { value: '_self', text: '当前窗口' },
            ],
            divTypes: [
                {
                    text: '顶部',
                    value: 'type3' ,
                    image:'',
                    form:{
                        app_name:'xx抢单',
                        app_url:'http://www.ryqd.com/asset/loan/img/xiaotubao01.png',
                        color:'#ba2b39',
                    }
                },
                {
                    text: '轮播图',
                    value: 'type4' ,
                    image:'',
                    form:{
                        targetItem: [
                            { target: '_self',  text:'', url:'', herf:''},
                        ],
                    }
                },
                {
                    text: '图标组件',
                    value: 'type5' ,
                    image:'',
                    form:{
                        targetItem: [
                            { target: '_blank', text:'',   url:'', herf:''},
                        ],

                    }
                },
                {
                    text: '图片列表',
                    value: 'type6' ,
                    image:'',
                    form:{
                        table_title:'请根据你的情况看方案',
                        targetItem: [
                            { target: '_blank',  text: '', url:'', herf:''},
                        ],
                    }
                },
                {
                    text: '我的合伙人',
                    value: 'type1' ,
                    image:'http://www.surongtong.cn/storage/20250515/963ea80ac7283d371bd67849fbdde612.png',
                    form:{
                        color:'#ba2b39',
                        table_title:'我的合伙人',
                        title:'我的XXXX合伙人，进入我的邀请',
                        button_name:'立即分享',
                        button_herf:'/user/share'
                    }
                },
                {
                    text: '官方联系方式',
                    value: 'type2',
                    image:'http://www.surongtong.cn/storage/20250515/e0375e7266d473de3d12929dfb763516.png',
                    form:{
                        table_title:'官方联系方式',
                        title:'扫码关注XXXX微信公众号',
                        color:'#ba2b39',
                        code_url:'',
                        tag:[]
                    }
                },
            ],
        }
    },
    created() {
        this.load_register_logo()
    },
    methods: {
        changeColor() {
            this.currentIndex = (this.currentIndex + 1) % this.colors.length;
            this.selectedDiv.form.color = this.colors[this.currentIndex];
            console.log('this.selectedDiv',this.selectedDiv)
        },
        removeItem(id) {
            console.log('删除前',id)
            this.divs = this.divs.filter(item => item.id !== id);
            this.divs.forEach((item, index) => {
                item.id = index + 1;
            });
            console.log('删除后',this.divs)

        },
        load_register_logo() {
            axios.get(`/app/setting/home_web_diy`).then((response) => {
                if(response.data.code == 0) {
                    this.divs = response.data.data ?  response.data.data : [];
                    this.selectDiv(this.divs[0])
                }
            })
                .catch(function () {})
                .then(function () {
                });
        },
        addDiv() {
            var iamge = '';
            var from = '';
            console.log(this.newDivType)
            this.divTypes.forEach(v => {
                if(v.value == this.newDivType){
                    iamge =  v.image
                    from = v.form
                }
            })
            const newDiv = {
                id: this.divs.length + 1,
                imageUrl: iamge,
                form: from,
                type: this.newDivType,
            }
            this.divs.push(newDiv);
            this.selectDiv(newDiv);

            console.log('this.divs',this.divs)

            this.showAddDialog = false;
        },
        selectDiv(div) {
            this.selectedDiv = Object.assign({}, div);
            console.log('this.selectedDiv',this.selectedDiv)
        },
        addTag() {
            const tagName = prompt("输入标签名称:");
            if (tagName && tagName.trim() !== "") {
                this.selectedDiv.form.tag.push(tagName.trim());
            }
        },
        removeTag(index) {
            this.selectedDiv.form.tag.splice(index, 1);
        },
        submitForm() {
            // 提交表单逻辑
            // 例如，更新divs数组中对应的div对象
            const index = this.divs.findIndex(d => d.id === this.selectedDiv.id);
            if (index !== -1) {
                this.divs[index] = Object.assign({}, this.selectedDiv);
            }
            console.log('保存内容',this.divs)
            // 可以在这里发送请求到服务器保存数据
            this.saving = true;
            const that = this;
            axios.post(`/app/setting/home_web_diy`, {value: this.divs}).then((response) => {
                this.$toast.open({
                    message: response.data.msg,
                    type: response.data.code == 0 ? 'success' : 'error',
                    position: 'top-right',
                });
            })
                .catch(function () {})
                .then(function () {
                    that.saving = false;
                });

        },
    },
}
</script>
